<template>
  <basic-container :btnFlag=true>
    <div style="border: 1px solid #d2d2d2;">
      <card-header :header-data="headerData"
                   @buttonClick="handleAdd()"></card-header>
      <div style="margin: 20px;">
        <el-row>
          <el-col :span="18"
                  style="margin-bottom: -43px;">
            <el-form :label-position="labelPosition"
                     label-width="90px"
                     :model="projectForm"
                     style="padding-right: 5%;padding-left: 10px;"
                     :rules="rules1"
                     ref="projectForm">
              <el-form-item class="form-item"
                            label="清单标题"
                            prop="title">
                <el-input v-model="projectForm.title"></el-input>
              </el-form-item>
              <el-form-item class="form-item"
                            label="清单说明"
                            prop="description">
                <el-input type="textarea"
                          :rows="3"
                          v-model="projectForm.description">
                </el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="5"
                  style="margin-bottom: -7px;">
            <el-row>
              <el-col>
                <!--planning_list_zxqy：空间规划权限-->
                <el-button @click.stop="adjustmentspace()"
                           type="primary"
                           v-if="spacebtn && (permissions.planning_list_kjgh)">请选择空间规划
                </el-button>
              </el-col>
              <el-col>
                <!--planning_list_zxqy：专项规划和区域规划权限-->
                <el-button @click.stop="adjustment()"
                           type="primary"
                           v-if="otherbtn && (permissions.planning_list_zxqy)">请选择规划
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-dialog title="请选择规划"
                 :visible.sync="dialogFormVisible"
                 width="85%">
        <avue-crud :data="datadialog"
                   :option="optiondialog"
                   :page="pagedialog"
                   :table-loading="Loadingdialog"
                   @on-load="getListdialogData"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   @selection-change="selectionChange"
                   style="margin-top: -10px;"
                   ref="datadialog">
          <!--<template slot-scope="scope"-->
                    <!--slot="menu">-->
            <!--<div class="menu-title"-->
                 <!--@click.stop="detailApplication(scope.row,scope.index)">-->
              <!--<i class="iconfont iconview"-->
                 <!--style="color: #409EFF;"></i>-->
              <!--<p class="menu-title-text">详情</p>-->
            <!--</div>-->
          <!--</template>-->
        </avue-crud>

        <div slot="footer"
             class="dialog-footer">
          <el-button @click="cancelDept()">取 消</el-button>
          <el-button type="primary"
                     @click="confirmDept()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- :page="page"-->
      <avue-crud :data="tableData3"
                 :option="option"
                 :table-loading="tableLoading"
                 @on-load="getApplyList"
                 @refresh-change="refreshChange"
                 class="crudcs">
        <!--<template slot-scope="scope"-->
                  <!--slot="menu">-->
          <!--<div class="menu-title"-->
               <!--@click.stop="detailApplication(scope.row,scope.index)">-->
            <!--<i class="iconfont iconview"-->
               <!--style="color: #409EFF;"></i>-->
            <!--<p class="menu-title-text">详情</p>-->
          <!--</div>-->
        <!--</template>-->
      </avue-crud>

      <detail-dialog :reg-id="curRegId"
                     v-if="curRegId"
                     :detail-visiblesubmit="detailVisiblesubmit"
                     @detailConfirm="detailConfirm"></detail-dialog>

      <div style="text-align: center; margin-top: 40px;margin-bottom: 40px;">
        <el-button type="warning"
                   :disabled="isSaveDisabled"
                   @click="temporarySave()">暂存</el-button>
        <el-button type="warning"
                   :disabled="isSubmitDisabled"
                   @click="submitList()">提交</el-button>
        <el-button @click="goback()">取消</el-button>
      </div>
    </div>
  </basic-container>
</template>
<script>
import { protocolAdd } from "@/api/planning/detailList";
import { protocolsubmit } from "@/api/planning/detailList";
import { projectListDeptForList } from "@/api/planning/project";
import { projectListsubmit } from "@/api/planning/project";
import { PROJECT_DIC } from '@/const/dict'
import { mapGetters } from "vuex";
import DetailDialog from "@/components/bostech/detailDialog";

export default {
  name: "protocolAdd",
  components: { DetailDialog },
  created(){
    window.detailApplication = this.detailApplication;
  },
  data () {
    return {
      page1: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      spacebtn: true,
      otherbtn: true,
      spaceorother: true,
      tableLoading: false,
      Loadingdialog: false,
      dialogFormVisible: false,
      dialogFormVisiblespace: false,
      detailVisiblesubmit: false,
      curRegId: '',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      pagedialog: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      projectForm: {
        title: '',
        description: '',
        registerinfoIds: [],
      },
      headerData: {
        title: '清单拟定创建',
        buttonName: ''
      },
      labelPosition: 'right',
      tableData3: [],
      datadialog: [],
      tableDatatemp: [],
      rules1: {
        title: [
          { required: true, message: '请输入清单标题', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入清单说明', trigger: 'blur' }
        ],
      },
      option: {
        page: true,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: true,
        indexWidth:70,
        cellBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        menuWidth: 100,
        keyId: "id",
        menu:false,
        column: [
          {
            label: "规划名称",
            prop: "title",
            cell: true,
            formatter: function (row, value, label, column) {
              return '<a style="cursor: pointer;" onclick="detailApplication(\'' + row.registerinfoId + '\')">' + value + '</a>';
            }
          },
          {
            label: "申报(牵头)单位",
            width: 240,
            prop: "orgName",
            cell: true,
          },
          {
            label: "规划类型",
            prop: "category",
            width: 200,
            type: "select",
            dicData: PROJECT_DIC.CATEGORY,
            cell: true
          }
        ]
      },
      optiondialog: {
        page: true,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: true,
        indexWidth:70,
        cellBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        keyId: "id",
        selection: true,
        menu:false,
        column: [
          {
            label: "规划名称",
            prop: "title",
            cell: true,
            formatter: function (row, value, label, column) {
              return '<a style="cursor: pointer;" onclick="detailApplication(\'' + row.registerinfoId + '\')">' + value + '</a>';
            }
          },
          {
            label: "申报(牵头)单位",
            width: 240,
            prop: "orgName",
            cell: true,
          },
          {
            label: "规划类型",
            prop: "category",
            width: 200,
            // type: "select",
            dicData: PROJECT_DIC.CATEGORY,
            cell: true
          }
        ]
      },
      isSaveDisabled: false,
      isSubmitDisabled: false,
    }
  },
  computed: mapGetters([
    "permissions", "deptInfo"
  ]),
  methods: {
    temporarySave () {
      this.isSaveDisabled = true;

      //暂存代码
      this.projectForm.registerinfoIds.splice(0, this.projectForm.registerinfoIds.length);
      for (var item in this.tableData3) {
        this.projectForm.registerinfoIds.push(this.tableData3[item].registerinfoId);
      }
      this.$refs.projectForm.validate(valid => {
        if (valid) {
          this.$confirm("确定暂存清单?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            protocolAdd(this.projectForm).then(response => {
              if (response.data.code == 0) {
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                });
                this.$router.go(-1);
              }
            })
          });
        } else {
          this.isSubmitDisabled = false;
        }
      });

      this.isSaveDisabled = false;
    },
    submitList () {
      this.isSubmitDisabled = true;
      // 提交代码
      this.projectForm.registerinfoIds.splice(0, this.projectForm.registerinfoIds.length);
      for (var item in this.tableData3) {
        this.projectForm.registerinfoIds.push(this.tableData3[item].registerinfoId);
      }
      this.$refs.projectForm.validate(valid => {
        if (valid) {
          this.$confirm("确定拟定清单?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            protocolsubmit(this.projectForm).then(response => {
              if (response.data.code == 0) {
                this.$notify({
                  title: '成功',
                  message: '提交成功',
                  type: 'success',
                  duration: 2000
                });
                this.$router.go(-1);
              }
            })
          })
        } else {
          this.isSubmitDisabled = false;
        }
      });

    },
    getApplyList (page, params) {
    },
    getListdialogData(){
    },
    currentChange(currentPage) {
      let page = this.page1;
      page.currentPage = currentPage;
      this.getListdialogPage(page);
    },
    sizeChange(pageSize) {
      let page = this.page1;
      page.pageSize = pageSize;
      this.getListdialogPage(page);
    },
    getListdialogPage(page) {
      this.Loadingdialog = true;
      var categorys = [];
      if (this.spaceorother == true) {
        categorys = "D";
      } else if (this.spaceorother == false) {
        categorys = "A,B,C";
      }
      projectListDeptForList(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        taskKey: 'list_report',
        inList: false,
        categorys: categorys
      })).then(response => {
        this.datadialog = response.data.data.records;
        this.pagedialog.total = response.data.data.total;
        this.page1.total = response.data.data.total;
        this.Loadingdialog = false;
      })
    },
    getListdialog () {
      this.Loadingdialog = true;
      var categorys = [];
      if (this.spaceorother == true) {
        categorys = "D";
      } else if (this.spaceorother == false) {
        categorys = "A,B,C";
      }
      projectListDeptForList(Object.assign({
        current: this.page1.currentPage,
        size: this.page1.pageSize,
        taskKey: 'list_report',
        inList: false,
        categorys: categorys
      })).then(response => {
        this.datadialog = response.data.data.records;
        this.pagedialog.total = response.data.data.total;
        this.page1.total = response.data.data.total;
        this.Loadingdialog = false;
      })
    },
    goback () {
      this.$router.go(-1);
    },
    adjustment () {  //选择其他规划
      this.dialogFormVisible = true;
      this.spaceorother = false;
      this.spacebtn = false;//选择空间规划按钮不显示
      this.getListdialog()
    },
    adjustmentspace () { //选择空间规划
      this.dialogFormVisible = true;
      this.spaceorother = true;
      this.otherbtn = false;//选择其他规划按钮不显示
      this.getListdialog()
    },
    refreshChange () {
    },
    selectionChange (list) {
      this.tableDatatemp = list;
    },
    cancelDept () {
      this.dialogFormVisible = false;
      if (this.tableData3.length == 0) {
        this.spacebtn = true;
        this.otherbtn = true;
      }
    },
    confirmDept () {
      this.tableData3 = this.tableDatatemp;
      this.projectForm.title = this.deptInfo.name + '关于要求对《' + this.tableDatatemp[0].title + '》等规划的目录清单进行批复的请示';
      this.dialogFormVisible = false;
      if (this.tableData3.length == 0) {
        this.spacebtn = true;
        this.otherbtn = true;
      }
    },
    // 立项详情
    detailApplication (registerinfoId) {
      this.curRegId = registerinfoId;
      this.detailVisiblesubmit = true
    },
    // 详情弹框确认
    detailConfirm () {
      this.detailVisiblesubmit = false
    }
  }
}
</script>

<style lang="scss">
.form-item {
  .el-form-item__label {
    color: black;
    font-size: 16px;
  }

  .el-form-item__content {
    margin-left: 93px;
  }
}

.card-body {
  padding: 10px;
}
</style>


